<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
            <van-dropdown-item v-model="value3" :options="option3" />
        </van-dropdown-menu>
        <ul class="goodsInfo" ref="ulgoods">
            <li class="goodsInfo_item" v-for="(item, index) in searchProducts" :key="index">
                <div class="goodsImg">
                    <img :src="item.listPicUrl" alt="">
                </div>

                <div v-if="item.itemTagList && item.name" class="tag">
                    <img src="./img/static-union_166909947513c0c8.png.png" alt="">
                    {{ item.itemTagList && item.name }}
                </div>
                <div class="price">
                    <h3 class="acPrice" style="display: inline-block;" v-if="item.finalPriceInfoVO.priceInfo.finalPrice">
                        {{ item.finalPriceInfoVO.priceInfo.finalPrice && item.finalPriceInfoVO.priceInfo.finalPrice.prefix
                        }}
                        ￥{{ item.finalPriceInfoVO.priceInfo.finalPrice && item.finalPriceInfoVO.priceInfo.finalPrice.price
                            ||
                            item.finalPriceInfoVO.priceInfo.finalPrice && item.finalPriceInfoVO.priceInfo.finalPrice.basicPrice
                        }}
                    </h3>
                    <h3 class="acPrice" style="display: inline-block;" v-else>
                        ￥{{ item.finalPriceInfoVO.priceInfo.basicPrice && item.finalPriceInfoVO.priceInfo.basicPrice }}
                    </h3>
                    <del style="color:#999999;font-size: 10px; display: inline-block;"
                        v-if="item.finalPriceInfoVO.priceInfo.counterPrice">
                        <h3>￥{{ item.finalPriceInfoVO.priceInfo.counterPrice && item.finalPriceInfoVO.priceInfo.counterPrice
                        }}</h3>
                    </del>
                </div>
                <div class="fulldiscount" v-if="item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.content">
                    {{ item.finalPriceInfoVO.banner.price && item.finalPriceInfoVO.banner.price.prefix }}
                    {{ item.finalPriceInfoVO.banner.price && item.finalPriceInfoVO.banner.price.price ? "￥" : '' }}{{
                        item.finalPriceInfoVO.banner.price && item.finalPriceInfoVO.banner.price.price }}

                    {{ item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.title }}
                    {{ item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.content }}
                </div>
            </li>


            <!-- <li class="goodsInfo_item" v-if="isHidden">
                <div class="goodsImg"></div>
            </li> -->

        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'ClassIficationlist',
})
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { useRoute } from "vue-router"
import { reqSearch } from "@/api/search"




const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('q')
const option1 = [
    { text: '综合', value: 0 },
]
const option2 = [
    { text: '价格', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
];
const option3 = [
    { text: '分类', value: 'q' },
    { text: '好评排序', value: 'w' },
    { text: '销量排序', value: 'e' },
];

const searchProducts = ref<any>([])
onMounted(async () => {
    const route = useRoute()
    const { keyword } = route.query
    const params = {
        categoryId: 0,
        descSorted: false,
        floorPrice: -1,
        itemId: 0,
        keyword,
        matchType: 0,
        searchWordSource: 1,
        size: 40,
        sortType: 0,
        source: -1,
        stillSearch: false,
        upperPrice: -1
    }
    const res = await reqSearch(params)
    console.log(res);
    //保存数据
    searchProducts.value = res.directlyList
})








</script>

<style lang="scss" scoped>
.goodsInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .goodsInfo_item {
        width: 47%;
        margin-top: 15px;

        .goodsImg {
            border-radius: 6px;

            img {
                width: 100%;
                border-radius: 14px;
            }
        }

        .goodsName {
            img {
                width: 20px;
                height: 20px;
                vertical-align: middle;
            }
        }

        .tag {
            // width: 100px;
            height: 20px;
            // border: 1px solid #d6d6d6;
            border-radius: 16px;
            // text-align: center;
            line-height: 20px;
            font-size: 15px;
            margin-bottom: 7px;

            img {
                width: 12px;
                vertical-align: middle;
            }
        }

        .price {
            .acPrice {
                color: red;
                font-size: 18px;
                // margin-top: 10px;
            }
        }

        .fulldiscount {
            height: 25px;
            background-color: red;
            border-radius: 16px;
            text-align: center;
            font-size: 10px;
            line-height: 25px;
            color: #fff;
            font-weight: 400;
        }
    }

}
</style>